<template>
  <div id="app">
    <div id="nav">
      <el-container>
        <el-header>
          <div class="top">
            <div class="top-one">
              <el-row :gutter="20">
                <!-- 左 -->
                <!-- 首页左上角logo -->
                <el-col :span="2" style="padding-left: 0px;">
                  <div class="logo">
                    <img src="./assets/image/logo.png" alt />
                  </div>
                </el-col>
                <!-- 中 -->
                <!-- 首页导航栏 -->
                <el-col :span="16" style="padding-left: 25px;">
                  <ul class="nav-ul">
                    <li>
                      <a style="color:#5a6169" @click="OnHome">首页</a>
                    </li>
                    <li>
                      <a style="color:#5a6169" @click="Onlive">直播</a>
                    </li>
                    <li>
                      <a style="color:#5a6169" @click="OnDownload">下载APP</a>
                    </li>
                    <!-- 搜索框 -->
                    <li class="input">
                      <el-input placeholder="可搜索版块、用户、长文、微文" class="el-input">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                      </el-input>
                    </li>
                  </ul>
                </el-col>
                <!-- 右 -->
                <el-col :span="2">
                  <ul class="text">
                    <li>
                      <a @click="OnAbout">登录</a>
                    </li>
                    <li>
                      <a @click="OnRegister">注册</a>
                    </li>
                    <li class="text-fb">
                      <el-button type="primary" icon="el-icon-edit" plain round>发布</el-button>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-header>
      </el-container>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    OnDownload () {
      this.$router.push('/Download')
    },
    Onlive () {
      this.$router.push('/live')
    },
    OnHome () {
      this.$router.push('/')
    },
    OnAbout () {
      this.$router.push('/about')
    },
    OnRegister () {
      this.$router.push('/Register')
    }
  }
}
</script>
<style scoped>
.top {
  position: fixed;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  top: 0;
  left: 0;
  z-index: 50;
}
.top-one {
  width: 1170px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}
.el-row {
  width: 1200px;
}
.logo {
  float: left;
}
.logo img {
  width: 129px;
  height: 46px;
  position: relative;
  top: 6px;
}
.nav-ul {
  width: 760px;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}
.nav-ul li a {
  cursor:pointer;
  font-size: 16px;
  line-height: 60px;
  display: inline-block;
  height: 60px;
  padding: 0 24px;
}
.input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 488px;
}

.el-input {
  left: 15px;
}
.el-main {
  height: 1000px;
  background-color: #f6f8f9;
}
.text {
  display: flex;
  align-items: center;
  margin-right: 0;
  margin-left: 8px;
}
.text li a {
  font-size: 16px;
  line-height: 60px;
  display: inline-block;
  height: 60px;
  color: #5a6169;
  padding: 0 24px;
  word-break: keep-all;
}
</style>
